<template>
	<div class="danmu-msg">
		<span
			class="role"
			v-show="isManager == 91"
			:style="{
				transform: medal ? 'translateY(1.3px)' : 'translateY(1px)',
			}"
			>房</span
		>
		<span class="role anchor" v-show="upUid == uid">主播</span>
		<div class="medal" v-if="medal">
			<div
				class="msg-medal"
				:class="`level-${medal[0]}`"
				:style="{
					borderColor: mapColor(medalColor.borderColor),
				}"
			>
				<div
					class="fans-medal-label"
					:style="{
						background: `linear-gradient(45deg, ${mapColor(
							medalColor.bgStartColor
						)}, ${mapColor(medalColor.bgEndColor)})`,
					}"
				>
					{{ medal[1] }}
				</div>
				<div
					class="fans-medal-level"
					:style="{ color: mapColor(medalColor.color) }"
				>
					{{ medal[0] }}
				</div>
			</div>
		</div><span class="msg-nickname">{{ uname }}：</span
		><span class="msg-text">{{ msg }}</span>
	</div>
</template>

<script>
export default {
	name: "danmu-msg",
	props: {
		data: {
			type: Array,
			default: () => [],
		},
		ignoreVoice: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			uid: localStorage.getItem("liveUid"),
		};
	},
	methods: {
		mapColor(color) {
			return `#${color.toString(16)}`;
		},
	},

	computed: {
		medalColor() {
			const [, , , , color, , , borderColor, bgStartColor, bgEndColor] =
				this.data[3] && this.data[3];
			return { color, borderColor, bgStartColor, bgEndColor };
		},
		// 是否是房管
		isManager() {
			return this.data[15];
		},
		// 勋章
		medal() {
			// [0] 等级，[11] 是否激活
			if (this.data[3] && this.data[3][0] > 0 && this.data[3][11]) {
				return this.data[3];
			}
			return false;
		},
		// 用户名
		uname() {
			return this.data[2] && this.data[2][1];
		},
		// 信息内容
		msg() {
			return this.data[1];
		},
		// up uid
		upUid() {
			return this.data[2] && this.data[2][0];
		},
	},
};
</script>

<style lang="scss">
.danmu-msg {
	.role {
		display: inline-block;
		padding: 0 1px;
		font-size: 12px;
		color: #fea249;
		border-radius: 3px;
		border: 1px solid #fea249;
		transform: translateY(1.3px);
	}
	.anchor {
		padding: 0 3px;
		color: #fb7299;
		border-color: #fb7299;
	}
	.medal {
		display: inline-block;
		margin-right: 6px;
		height: 15.5px;
		transform: translateY(1px);
		.msg-medal {
			display: flex;
			height: 16px;
			line-height: 14px;
			border-radius: 2px;
			border: 1px solid #000000;
			font-size: 12px;
			cursor: default;
			.fans-medal-label {
				padding: 0 4px;
				color: #fff;
			}
			.fans-medal-level {
				width: 16px;
				background-color: #fff;
				text-align: center;
			}
		}
		&:empty {
			margin: 0;
		}
	}

	.msg-nickname {
		font-size: 12px;
		color: #39b0f1;
	}

	.msg-text {
		font-size: 12px;
		color: #cccccc;
		word-break: break-word;
	}
}
</style>
